<template>
  <YsRow>
    <div class="photos-title border_style">
      <p class="text_01">射线检测结果及评定表</p>
    </div>
    <div class="photos-table border_style">
      <table class="table border_style td100" style="border-collapse: collapse">
        <tr>
          <td class="td_wt text_01 border_style" v-for="(item,index) in templateHeader">{{item.field_name}}</td>
          <td class="td_wt text_01 border_style td100">操作 <span @click="addTableFn()" class="icon iconfont icon-tianjia"></span></td>
        </tr>
        <tr v-for="(item,index) in templateBody" :key="index">
          <td class="td_wt border_style text_01 td100">{{index+1}}</td>
          <td class="td_wt border_style text_01" v-for="(it,idx) in item.values" :key="idx">
            <template v-if="item.isRptEdit&&it.val_name!='设备号'">
              <YsInput v-if="!it.selectList" :maxlength="getMaxlength(it.column_id)" @input="inputNumber($event,index,idx,it)" v-model.trim="it.value"> </YsInput>
              <Select v-else class="select-border" v-model="it.value">
                <Option v-for="(ix, index) in it.selectList" :value="ix.type_name" :key="ix.id" :label="ix.type_name">{{ ix.type_name }}</Option>
              </Select>
            </template>
            <span v-else>{{it.value}}</span>
          </td>
          <td class="td_wt border_style text_01 td100">
            <span @click="setRptEditFn(item,index)" class="icon iconfont icon-bianji"></span>
            <span @click="deleteEvaluate(item,index)" class="icon iconfont icon-a-lujing22614"></span>
          </td>
        </tr>
        <tr>
          <td colspan="6" class="td_wt border_style text_01" style="text-align: right;"><span style="margin-right: 16px;">底片评级</span></td>
          <td class="td_wt border_style text_01" v-for="(item,i) in t5data" :key="i">
            <template v-if="item.field_name!='备注'">
              <Select v-if="item.t5_flag" class="select-border" v-model="item.t5_value">
                <Option v-for="(ix, index) in pingJiList" :value="ix.type_name" :key="ix.id" :label="ix.type_name">{{ ix.type_name }}</Option>
              </Select>
              <span v-else>{{item.t5_value}}</span>
            </template>
            <template v-else>
              <YsInput v-if="item.t5_flag" v-model.trim="item.t5_value"> </YsInput>
              <span v-else>{{item.t5_value}}</span>
            </template>
          </td>
          <td class="td_wt border_style text_01">
            <span @click="setRptEditFn2(true)" class="icon iconfont icon-bianji"></span>
          </td>
        </tr>
      </table>
    </div>
  </YsRow>
</template>
<script> 
import { mapGetters, mapActions } from "vuex";
export default {
  name: 'twoTemplate',
  props: {
    templateBean: {
      type: Object,
      default: () => {
        return {}
      }
    },
    reportDataBean: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  watch: {
    //获取表头
    templateBean(v) {
      if (v && v.templateFields2) {
        this.templateHeader = v.templateFields2
        this.templateHeader.unshift({
          field_name: "序号",
          key: 999,
        })
      }

      if (v && v.templateFields5) {
        this.tableFieldHeader5 = v.templateFields5
      }
    },
    //获取表格body
    reportDataBean(v) {
      if (v && v.table_field_data2) {
        let tData = v.table_field_data2 || []
        for (var i = 0; i < tData.length; i++) {
          let curBodyItem = tData[i]
          curBodyItem.isRptEdit = false
          for (var j = 0; j < curBodyItem.values.length; j++) {
            let cuevalueItem = curBodyItem.values[j]
            let headerData = this.templateHeader.find(item => item.field_id == cuevalueItem.column_id)
            if (headerData) {
              cuevalueItem.tf_id = headerData.id
              cuevalueItem.field_class = headerData.field_class
              cuevalueItem.val_name = headerData.field_name
            }
            if (cuevalueItem.column_id == 12) {
              cuevalueItem.val_name = "缺陷性质"
              cuevalueItem.selectList = this.flawTypeData
            }
            if (cuevalueItem.column_id == 13) {
              cuevalueItem.val_name = "评定"
              if (Number(cuevalueItem.value)) {
                let { type_name } = this.pingJiList.find(v => v.id == cuevalueItem.value)
                cuevalueItem.value = type_name
              }
              cuevalueItem.selectList = this.pingJiList
            }
            if (cuevalueItem.column_id == 14) {
              cuevalueItem.val_name = "专家复核"
              if (Number(cuevalueItem.value)) {
                let { type_name } = this.pingJiList.find(v => v.id == cuevalueItem.value)
                cuevalueItem.value = type_name
              }

              cuevalueItem.selectList = this.pingJiList
            }
          }
        }
        this.templateBody = tData

      }
      if (v && v.table_field_data5) {
        let items5 = v.table_field_data5 || []
        for (var i = 0; i < items5.length; i++) {
          let curItm5 = items5[i]
          let headerData = this.tableFieldHeader5.find(item => item.field_id == curItm5.values[0].column_id)
          curItm5.values[0].isRptEdit = false
          if (headerData.field_name == "评定" || "专家复核") {
            if (Number(curItm5.values[0].value)) {
              let { type_name } = this.pingJiList.find(v => v.id == curItm5.values[0].value)
              curItm5.values[0].value = type_name
            }
          }
          if (headerData) {
            curItm5.values[0].tf_id = headerData.id
            curItm5.values[0].field_class = headerData.field_class
            if (headerData.field_name == "评定") {
              this.t5data[0] = {
                t5_flag: false,
                t5_value: curItm5.values[0].value,
                field_id: headerData.field_id,
                field_name: headerData.field_name,
              }

            }
            if (headerData.field_name == "专家复核") {
              this.t5data[1] = {
                t5_flag: false,
                t5_value: curItm5.values[0].value,
                field_id: headerData.field_id,
                field_name: headerData.field_name,
              }
            }
            if (headerData.field_name == "备注") {
              this.t5data[2] = {
                t5_flag: false,
                t5_value: curItm5.values[0].value,
                field_id: headerData.field_id,
                field_name: headerData.field_name,
              }
            }
          }
        }

        this.tableFieldBody5 = items5
        this.$forceUpdate()

      }
    }
  },
  data() {
    return {
      t5data: [],
      nexdata: [],
      tableFieldHeader5: [],
      tableFieldBody5: [],
      flawTypeData: [],
      flawBeans: [],
      templateHeader: [],
      templateBody: [],
      operateTelData: [],
      volumeTypes: [],
      pingJiList: [
        { id: 1, type_name: '1级' },
        { id: 2, type_name: '2级' },
        { id: 3, type_name: '3级' },
        { id: 4, type_name: '4级' },
      ],
    }
  },
  created() {
    this.getQueXianLeiXing()
  },
  methods: {
    ...mapActions(["getqxjcPageFlawType"]),
    // 只能输入两位小数
    inputNumber(e, index, idx, it) {
      //正则表达试
      if (it.column_id == 11) {
        e = (e.match(/^\d*(\.?\d{0,2})/g)[0]) || null
        //重新赋值给input
        this.$nextTick(() => {
          this.templateBody[index].values[idx].value = e
        })
      }
    },

    //选择框，
    getQueXianLeiXing() {
      let _this = this;
      _this.getqxjcPageFlawType({ limit_recd: 99999 }).then((res) => {
        let { data, msg, scode, status } = res;
        if (status === "ok") {
          this.flawTypeData = data.flawTypeInfos
          this.$forceUpdate()
        } else {
          _this.$YsMessage.error(msg);
        }
      }).catch((err) => {
        _this.$YsMessage.error("获取数据失败");
      });
    },
    //设置长度
    getMaxlength(id) {
      if ([8, 9, 10].includes(id)) {
        return 15
      } else if ([11].includes(id)) {
        return 8
      } else if ([15].includes(id)) {
        return 30
      }
    },
    //删除
    deleteEvaluate(item, index) {
      if (item.row_id) {
        let remData = {
          id: item.row_id,
          operator_type: 2, //操作标识：1-新增，2-删除，编辑可随意传
          reportDetailBeans: item.values.map(v => { return { id: v.row_id, report_val: v.value } })
        }
        this.operateTelData.push(remData)
      }
      this.templateBody.splice(index, 1)
    },
    //新增
    addTableFn() {
      let subobj = []
      this.templateHeader.map(v => {
        if (v.field_id) {
          let obj = {
            column_id: v.field_id,
            row_id: null,
            value: "",
            tf_id: v.id,
            field_class: v.field_class,
          }
          if (v.field_name == "缺陷性质") {
            obj.selectList = this.flawTypeData
          }
          if (v.field_name == "评定") {
            obj.selectList = this.pingJiList
          }
          if (v.field_name == "专家复核") {
            obj.selectList = this.pingJiList
          }
          subobj.push(obj)
        }
      })



      this.templateBody.push({
        row_id: null,
        isRptEdit: true,
        values: subobj
      })
    },
    getoPerateTel() {
      this.templateBody.map(v => {
        this.getParmseData(v)
      })

      this.tableFieldBody5.map(v => {
        this.t5data.map(t => {
          if (v.values[0].column_id == t.field_id) {
            v.values[0].value = t.t5_value
            v.isRptEdit = t.t5_flag
          }
        })
      })
      this.tableFieldBody5.map(v => {
        this.getParmseData(v)
      })
    },
    getParmseData(v) {
      if (v.isRptEdit) {
        let exitItem = {
          id: v.row_id,
          file_id: this.$route.query.file_id,
          tp_id: this.$route.query.template_id,
          data_class: v.values[0].field_class || "",
          tf_id: v.values[0].tf_id || "",
          operator_type: 3,
          reportDetailBeans: []
        }
        let newReportDetail = v.values.map(t => {
          return {
            id: t.row_id,
            field_id: t.column_id,
            report_val: t.value
          }
        })
        exitItem.reportDetailBeans = newReportDetail
        if (v.row_id) { //编辑
          exitItem.operator_type = 3
        } else {
          exitItem.operator_type = 1
        }
        this.operateTelData.push(exitItem)
      }

    },
    //
    setRptEditFn2(item, index) {
      this.t5data.map(v => {
        v.t5_flag = true
      })
      this.$forceUpdate()

    },
    //
    setRptEditFn(item, index) {
      item.isRptEdit = true

      this.$forceUpdate()
    }
  }
}
</script>
<style scoped lang='less'>
.photos-title {
  height: 93px;
  width: 100%;
  border: 1px solid #e1e6f0;
  border-top: none;
  border-bottom: none;
  line-height: 93px;
  position: relative;
  p {
    text-align: center;
    font-size: 20px;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
  }
  span {
    position: absolute;
    right: 16px;
    bottom: 0px;
    height: 30px;
    line-height: 30px;
  }
}

.photos-table {
  width: 100%;
  border: 1px solid #e1e6f0;
  .table {
    width: 100%;
    position: relative;
    right: -1px;
    bottom: -1px;
    /deep/.ivu-input {
      border: none !important;
      &:focus {
        outline: none !important;
        border: none !important;
      }
    }
    /deep/.ivu-select-selection {
      border: none !important;
    }
    tr {
      text-align: center;
      td {
        font-size: 16px;
        height: 60px;
        border-right: 1px solid #e1e6f0;
        border-bottom: 1px solid #e1e6f0;
      }
      .td100 {
        width: 100px;
      }
    }
  }
}
.td_wt {
  width: 200px;
  word-break: break-all;
}
.icon-tianjia {
  margin-left: 2px;
}
.icon-bianji {
  margin-right: 4px;
}
</style>
